<template>
  <div>
      <div class="banner" @click="globalShow" >
          <img :src="bannerImg">

          <div class="bannerCompress">
            <span class="iconfont" >&#xe692;</span>
            {{this.bannerImgs.length}}
          </div>
          <div class="bannerInfo">{{sightName}}</div>
      </div>
      <fade-animation>
        <comment-global
          :imgs="bannerImgs"
          v-show="showGlobal"
          @close="globalClose"
        >
        </comment-global>
      </fade-animation>
  </div>
</template>
<script>
  import CommentGlobal from 'comment/global/Global'
  import FadeAnimation from 'comment/fade/FadeAnimation'
  export default {
    name: 'DetailBanner',
    components: {
      CommentGlobal,
      FadeAnimation
    },
    props: {
      sightName: String,
      bannerImg: String,
      bannerImgs:Array
    },
    data () {
      return {
        showGlobal: false,
      }
    },
      methods: {
        globalShow () {
          this.showGlobal = true
        },
        globalClose () {
          this.showGlobal = false
        },

      }

  }
</script>
<style scoped>
  .banner {
    width:100%;
    height: 55%;
    overflow: hidden;
    position: relative;
  }
  .banner img {
    width: 100%;
    height: 100%;
  }

  .banner .bannerCompress {
    line-height:20px;
    background-color:rgba(0,0,0,.6);
    position: absolute;
    left: 10px;
    bottom: 26px;
    border-radius: 10px;
    color: white;
    padding: 0 10px;
  }
  .bannerCompress span {
    padding: 0 10px;
  }
  .banner .bannerInfo{
    line-height: 24px;
    width: 100%;
    background-image: linear-gradient(top, rgba(0,0,0,0),rgba(0,0,0,.8));
    position: absolute;
    padding-left: 10px;
    bottom:0;
    color: white;
  }

</style>
